<template>
  <div class="answer-content">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <div @click="fn.back()" class="mui-action-back"><img class="back-btn" src="../../../../static/images/back.png"></div>
        <div class="header-search flex-center">答题详情</div>
        <div @click="showCard()" class="header-right flex-center answer-card"><img src="../../../../static/images/zhuzhi_jiegou.png" alt="">答题卡</div>
      </div>
    </header>
    <b v-if="answerRecord.score == 1 && answerRecord.status === '1'" class="flex-justify-start study-header">1次答完通过 答题积分：+1分</b>
    <b v-if="answerRecord.score == 1 && answerRecord.status === '4'" class="flex-justify-start study-header">特殊情况 答题积分：+1分</b>
    <b v-if="answerRecord.score == 0.9 && answerRecord.status === '1'" class="flex-justify-start study-header">2次答完通过 答题积分：+0.9分</b>
    <b v-if="answerRecord.score == 0.8 && answerRecord.status === '1'" class="flex-justify-start study-header">3次答完通过 答题积分：+0.8分</b>
    <b v-if="answerRecord.score == 0.5 && answerRecord.status === '1'" class="flex-justify-start study-header">3次答完未通过：+0.5分</b>
    <div class="mui-page-content record-content-top" style="bottom: 0;margin-top: 54px">
      <div id="cardList" class="mui-scroll-wrapper mui-pages">
        <div class="mui-scroll">
          <ul class="mui-table-view" v-for="(data,index) in swipeData" :key="data.id">
            <li v-if="data.type==='1'" class="mui-table-view-cell">
              <h2 class="organization-lists-title">{{index+1}}.【单选】{{data.title}}</h2>
              <div class="types-lists answer-notice-lists">
                <div v-for="(examAnswerVoList1,index_) in data.examAnswerVoList" :key="examAnswerVoList1.id">
                  <div v-if="isNotChooseAndNotRight(index, examAnswerVoList1.isChoose, examAnswerVoList1.isRight, index_)" class="mui-input-row mui-radio mui-left flex-center">
                    <label>{{examAnswerVoList1.name}}</label>
                    <input :name="data.id" value="Item 1" type="radio">
                  </div>
                  <div v-if="isNotChooseAndRight(index, examAnswerVoList1.isChoose, examAnswerVoList1.isRight, index_)" class="mui-input-row mui-radio mui-left flex-center select-false">
                    <label>{{examAnswerVoList1.name}}</label>
                    <input :name="data.id" value="Item 1" type="radio">
                  </div>
                  <div v-if="isChooseAndRight(index, examAnswerVoList1.isChoose, examAnswerVoList1.isRight, index_)" class="mui-input-row mui-radio mui-left flex-center select-true">
                    <label>{{examAnswerVoList1.name}}</label>
                    <input :name="data.id" value="Item 1" type="radio" checked="checked">
                  </div>
                  <div v-if="isChooseAndNotRight(index, examAnswerVoList1.isChoose, examAnswerVoList1.isRight, index_)" class="mui-input-row mui-radio mui-left flex-center select-false">
                    <label>{{examAnswerVoList1.name}}</label>
                    <input :name="data.id" value="Item 1" type="radio" checked="checked">
                  </div>
                </div>
              </div>
              <p v-if="data.isRight==='0'" class="schedule-item-world"><span class="mine-lists-money">回答错误</span>&nbsp;&nbsp;&nbsp;正确答案 {{data.rightStr}}</p>
              <p v-if="data.isRight==='1'" class="work-blue">回答正确</p>
              <p v-if="data.isRight===null" class="schedule-item-world"><span class="mine-lists-money">未答题</span>&nbsp;&nbsp;&nbsp;正确答案 {{data.rightStr}}</p>
              <div class="news-world-details">
                解释：{{data.explain}}
              </div>
            </li>
            <li v-if="data.type==='2'" class="mui-table-view-cell">
              <h2 class="organization-lists-title">{{index+1}}.【多选】{{data.title}}</h2>
              <div class="types-lists answer-notice-lists">
                <div v-for="(examAnswerVoList1,index_) in data.examAnswerVoList" :key="examAnswerVoList1.id">
                  <div v-if="isNotChooseAndNotRight(index, examAnswerVoList1.isChoose, examAnswerVoList1.isRight, index_)" class="mui-input-row mui-checkbox mui-left flex-center">
                    <label>{{examAnswerVoList1.name}}</label>
                    <input :name="data.id" value="Item 1" type="checkbox">
                  </div>
                  <div v-if="isNotChooseAndRight(index, examAnswerVoList1.isChoose, examAnswerVoList1.isRight, index_)" class="mui-input-row mui-checkbox mui-left flex-center select-false">
                    <label>{{examAnswerVoList1.name}}</label>
                    <input :name="data.id" value="Item 1" type="checkbox">
                  </div>
                  <div v-if="isChooseAndNotRight(index, examAnswerVoList1.isChoose, examAnswerVoList1.isRight, index_)" class="mui-input-row mui-checkbox mui-left flex-center select-false">
                    <label>{{examAnswerVoList1.name}}</label>
                    <input :name="data.id" value="Item 1" type="checkbox" checked="checked">
                  </div>
                  <div v-if="isChooseAndRight(index, examAnswerVoList1.isChoose, examAnswerVoList1.isRight, index_)" class="mui-input-row mui-checkbox mui-left flex-center select-true">
                    <label>{{examAnswerVoList1.name}}</label>
                    <input :name="data.id" value="Item 1" type="checkbox" checked="checked">
                  </div>
                </div>
              </div>
              <p v-if="data.isRight==='0'" class="schedule-item-world"><span class="mine-lists-money">回答错误</span>&nbsp;&nbsp;&nbsp;正确答案 {{data.rightStr}}</p>
              <p v-if="data.isRight==='1'" class="work-blue">回答正确</p>
              <p v-if="data.isRight===null" class="schedule-item-world"><span class="mine-lists-money">未答题</span>&nbsp;&nbsp;&nbsp;正确答案 {{data.rightStr}}</p>
              <div class="news-world-details">
                解释：{{data.explain}}
              </div>
            </li>
            <li v-if="data.type==='3'" class="mui-table-view-cell">
              <h2 class="organization-lists-title">{{index+1}}.【判断题】{{data.title}}</h2>
              <div class="types-lists answer-notice-lists">
                <div v-for="(examAnswerVoList1,index_) in data.examAnswerVoList" :key="examAnswerVoList1.id">
                  <div v-if="isNotChooseAndNotRight(index, examAnswerVoList1.isChoose, examAnswerVoList1.isRight, index_)" class="mui-input-row mui-radio mui-left flex-center">
                    <label>{{examAnswerVoList1.name}}</label>
                    <input :name="data.id" value="Item 1" type="radio">
                  </div>
                  <div v-if="isNotChooseAndRight(index, examAnswerVoList1.isChoose, examAnswerVoList1.isRight, index_)" class="mui-input-row mui-radio mui-left flex-center select-false">
                    <label>{{examAnswerVoList1.name}}</label>
                    <input :name="data.id" value="Item 1" type="radio">
                  </div>
                  <div v-if="isChooseAndNotRight(index, examAnswerVoList1.isChoose, examAnswerVoList1.isRight, index_)" class="mui-input-row mui-radio mui-left flex-center select-false">
                    <label>{{examAnswerVoList1.name}}</label>
                    <input :name="data.id" value="Item 1" type="radio" checked="checked">
                  </div>
                  <div v-if="isChooseAndRight(index, examAnswerVoList1.isChoose, examAnswerVoList1.isRight, index_)" class="mui-input-row mui-radio mui-left flex-center select-true">
                    <label>{{examAnswerVoList1.name}}</label>
                    <input :name="data.id" value="Item 1" type="radio" checked="checked">
                  </div>
                </div>
              </div>
              <p v-if="data.isRight==='0'" class="schedule-item-world"><span class="mine-lists-money">回答错误</span>&nbsp;&nbsp;&nbsp;正确答案 {{data.rightStr}}</p>
              <p v-if="data.isRight==='1'" class="work-blue">回答正确</p>
              <p v-if="data.isRight===null" class="schedule-item-world"><span class="mine-lists-money">未答题</span>&nbsp;&nbsp;&nbsp;正确答案 {{data.rightStr}}</p>
              <div class="news-world-details">
                解释：{{data.explain}}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div v-if="isShowCard" id="cardNum" class="mui-popover mui-popover-action mui-popover-bottom" style="display:block;opacity:1;transform:translate3d(0,0,0)">
      <div class="record-member-lists">
        <h2 class="card-title">答题卡</h2>
        <div class="work-message-lists card-content-lists flex-justify-start">
          <div v-for="(item,index) in swipeData" :class="{'no-select':!isChecked(item),'error-answer':isError(item)}" :key="index" @click="turn2item(index+1)">{{index+1}}</div>
        </div>
      </div>
    </div>
    <div v-if="isShowCard" @click="isShowCard=false" class="mui-backdrop mui-backdrop-action mui-active" style=""></div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import api from '@/common/config/api'
  import moment from 'moment'
  export default {
    name: 'answerDetails',
    data () {
      return {
        fn: tools,
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        objectsName: '',
        swipeData: [],
        infinite: true,
        pageIndex: 0,
        year: new Date().getFullYear(),
        attachmentList: [],
        tabIndex: 0,
        rightArr: [],
        isShowCard: false,
        answerRecord: {}
      }
    },
    created () {
      this.answerRecord = this.$store.state.answerRecord || {}
      this.loadData()
    },
    methods: {
      detail (data) {
      },
      onPullingUp () {
        console.log('onPullingUp')
        this.loadData()
      },
      reloadData () {
        this.pageIndex = 0
        this.swipeData = []
        this.loadData()
      },
      loadData () {
        let data
        let flag = this.$route.params.flag
        let paperId = this.$route.params.paperId
        if (flag === '1') {
          data = {
            paperId: paperId
          }
        } else {
          data = {
            weekPlanId: paperId
          }
        }
        loginService.getExamPaperAnswerDetail(data).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          this.swipeData = this.swipeData.concat(res.data)
          let length = this.swipeData.length
          this.rightArr = Array.apply(null,{length:length})
          this.swipeData.map((v, index) => {
            let rightStr = ''
            let result = ''
            let checkboxResult = []
            v.examAnswerVoList.map((w, index_) => {
              if (w.isChoose === '1') {
                if (v.type === '2') {
                  checkboxResult.push(w.id)
                } else {
                  result = w.id
                }
              }
              switch (index_) {
                case 0:
                  w.name = "A、" + w.name
                  if (w.isRight === '1') {
                    rightStr = "A、"
                  }
                  break
                case 1:
                  w.name = "B、" + w.name
                  if (w.isRight === '1') {
                    rightStr = rightStr + "B、"
                  }
                  break
                case 2:
                  w.name = "C、" + w.name
                  if (w.isRight === '1') {
                    rightStr = rightStr + "C、"
                  }
                  break
                case 3:
                  w.name = "D、" + w.name
                  if (w.isRight === '1') {
                    rightStr = rightStr + "D、"
                  }
                  break
              }
            })
            rightStr = rightStr.substr(0, rightStr.length-1)
            v.rightStr = rightStr
            v.result = result
            v.checkboxResult = checkboxResult
          })
        })
      },
      formateTime (str) {
        moment.lang('zh-cn')
        return moment(str).format('MM月DD日')
      },
      meetingStatus (str) {
        return str === "未开展"
      },
      getFilePath (arr) {
        arr.map((v) => {
          v.url = api.downLoadFile + v.fileId
          return v
        })
        return arr
      },
      isImage (fileName) {
        let arrExt = fileName.split('.')
        return 'PNG,JPG,JPEG,BMP,GIF'.split(',').indexOf(arrExt[arrExt.length - 1].toUpperCase()) > -1
      },
      goAnswer () {
        this.$router.push({path: `/answerBegin`})
      },
      isNotChooseAndNotRight (rootIndex, isChoose, isRight, index_) {
        return isChoose === '0' && isRight === '0'
      },
      isNotChooseAndRight (rootIndex, isChoose, isRight, index_) {
        return isChoose === '0' && isRight === '1'
      },
      isChooseAndNotRight (rootIndex, isChoose, isRight, index_) {
        return isChoose === '1' && isRight === '0'
      },
      isChooseAndRight (rootIndex, isChoose, isRight, index_) {
        return isChoose === '1' && isRight === '1'
      },
      // 显示答题卡
      showCard () {
        this.isShowCard = true
      },
      // 跳转题目
      turn2item (n) {
        let el = document.querySelectorAll('.mui-table-view')[n-1]
        let cardList = document.querySelector('#cardList')
        cardList.scrollTop = el.offsetTop
        this.isShowCard = false
      },
      // 是否已经选择答案
      isChecked (item) {
        return item.result || (Array.isArray(item.checkboxResult) && item.checkboxResult.length > 0)
      },
      isError (item) {
        return item.isRight==='0'
      }
    }
  }
</script>

<style scoped>

</style>
